<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`离职申请`" :autoBack="true" leftIconColor="$uni-text-color"
    :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">

      <!-- 表单盒子 -->
      <view class="form_box area">
        <scroll-view scroll-y :enable-back-to-top="true" class="comprehensive">
          <!-- 表单结构 -->
          <uni-forms ref="relRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind" labelWidth="120">
            
            <uni-forms-item name="type" label="离职原因" required class="flex">
              <view class="flex-vertical">
                <uni-easyinput type="textarea" v-model="state.formData.type" placeholder="请输入离职原因"></uni-easyinput>
              </view>
            </uni-forms-item>
            <uni-forms-item name="content" label="交接工作" required class="flex">
              <view class="flex-vertical">
                <uni-easyinput type="textarea" v-model="state.formData.content" placeholder="请输入交接内容"></uni-easyinput>
              </view>
            </uni-forms-item>
            <view class="cards">
              <view class="title">
                图片:
              </view>
              <view class="img">
             
                <u-upload :fileList="state.fileList1" @afterRead="imageUpload" @delete="deletePic" name="4" multiple
                  :maxCount="4">
                </u-upload>
              </view>

            </view>
          </uni-forms>

        </scroll-view>
      </view>

    </view>

  </s-layout>



  <!-- 底部提交按钮 -->
  <view>
    <s-button @netWork="submitForm" :text="text"></s-button>
  </view>



</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import { type, content } from '@/sheep/validate/form';
const { safeAreaInsets } = uni.getSystemInfoSync();
const userStore = sheep.$store('user');
const userStoreValue = uni.getStorageSync('user-store');
const userStoreObject = JSON.parse(userStoreValue)
const text = ref("提交");
const state = reactive({
  fileList1: [],
  formData: {
    type: '',
    content: '',
    uploadimg:'',

  },
  rules: {
    type,
    content
  },
});
onLoad((options)=>{
})

//提交
const relRef = ref();
const company_type = ref()
const submitForm = async () => {
  if(userStoreObject.userInfo.group_id == 10) {
      company_type.value = 1
    } else if (userStoreObject.userInfo.group_id == 13) {
      company_type.value = 2
    }
  const validate = await unref(relRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;
  uni.$u.throttle(() => {
  state.formData.uploadimg = postData.value.join(',')
  let parpam={
    handover: state.formData.content,
    cause: state.formData.type,
    images: state.formData.uploadimg,
    company_type:company_type.value,
    // department_id:userStore.userInfo.department.deparment.id
  }
  sheep.$api.dimission.dimissionProjectAdd(parpam).then((res) => {
    if (res.code == 1) {
      sheep.$helper.toast(res.msg);
      setTimeout(() => {
        sheep.$router.back(true)
      }, 500)
    } else {
      sheep.$helper.toast(res.msg);
    }
  })
  },1000)
};
// 删除图片
const deletePic = (event) => {
  state.fileList1.splice(event.index, 1);
  postData.value.splice(event.index, 1);
};

// 新增图片
const imageUpload = async (event) => {
  let lists = [].concat(event.file);
  let fileListLen = state.fileList1.length;
  lists.map((item) => {
    state.fileList1.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const url = await uploadFilePromise(lists[i].url);
    let item = state.fileList1[fileListLen];
    state.fileList1.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: sheep.$url.cdn(url),
    });
    fileListLen++;
  }
};
const postData = ref([])
async function uploadFilePromise(tempUrl) {
  let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
  postData.value.push(url)
  return url;


};



</script>

<style scoped lang="scss">
 @import '../compentns/public.scss';
//  修改内容
.edit_button{
    height: 144rpx;
    width: 90%;
    padding: 0 5%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
    display: flex;
    .del{width: 276rpx;
      height: 90rpx;
border-radius: 50rpx;
border: 2rpx solid $uni-color-primary;
color: $uni-color-primary;
 font-family: PingFangSC;
color: $uni-color-primary;
font-weight: $uni-font-weight;
font-size: 34rpx;}
.edit{
  margin-left: 20rpx;
  width: 454px;
height: 90rpx;
border-radius: 50rpx;
font-family: PingFangSC;
color: #FFFFFF;
font-weight: $uni-font-weight;
font-size: 34rpx;
background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}
}

:deep(.uni-forms) {
  .uni-forms-item.is-direction-left {
      .uni-forms-item__label {
        background: $uni-bg-color;
        margin-top: -10rpx;
      }
      flex-direction: column !important;
      height: auto;
  }
}
// 滚动
.comprehensive{
        width: calc(100% - 40rpx);
        background-color: rgba(0, 0, 0, 0);
        margin: 0 20rpx;
        height: 73vh;
}
//图片
.cards {
  width: 100%;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  margin-bottom: 120rpx;
  padding-bottom: 20rpx;
  .img{
    display: flex;
    margin-right: 10rpx;

  }
    :deep(.u-upload) {
      margin: 30rpx 0;
      width: 100% !important;
      background: #fff !important;
      .u-upload__wrap{
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
      }
}

.uploadimg {
  width: 60rpx;
  height: 48rpx;
}
}
:deep(.is-disabled){
  .uni-easyinput__placeholder-class{
    color: $uni-color-primary !important;
  }   

}
</style>